<template>
  <transition name="message-box">
    <div class="message-box" v-mask="message" v-if="show">
      <i class="iconfont" :class="boxType"></i>
      <div class="title">{{title}}</div>
      <p>{{message}}</p>
    </div>
  </transition>
</template>

<script>
import '@/components/mask'
export default {
  props: {
    show: Boolean,
    message: String,
    type: String,
    title: String
  },
  methods: {
    close() {
      this.$emit('close')
    }
  },
  computed: {
    boxType() {
      switch (this.type) {
        case 'error':
          return 'icon-jinggao'
        case 'success':
          return 'icon-dui'
      }
    }
  }
}
</script>

<style lang="less">
.message-box {
  display: block;
  width: 338px;
  border-radius: 5px;
  background: white;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -74px;
  margin-top: -169px;
  z-index: 1000;
  .iconfont {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    margin-top: 31px;
    font-size: 46px;
    color: #fea201;
  }
  .title {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    color: #333333;
  }
  p {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    color: #333333;
  }
}

.message-box-enter-active,
.message-box-leave-active {
  transition: all 0.5s;
}

.message-box-enter,
.message-box-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
</style>
